import React, { useState } from 'react';
import { Table, Input, Button, DatePicker, Card, Space } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import * as XLSX from 'xlsx';
import ReactECharts from 'echarts-for-react';
import OverviewLayout from '../../layouts/OverviewLayout'; // 导入您提供的布局组件
import moment from 'moment';

// 模拟项目数据
const mockProjects = [
    {
        id: 'P001',
        name: '城市花园项目',
        repository: '仓库A',
        projectUrl: 'https://example.com/project1',
        createTime: '2023-01-15',
        projectManager: '张经理',
        constructor: '李工',
        laborTeam: '第一施工队',
        remark: '一期工程'
    },
    {
        id: 'P002',
        name: '商业中心建设',
        repository: '仓库B',
        projectUrl: 'https://example.com/project2',
        createTime: '2023-03-22',
        projectManager: '王经理',
        constructor: '赵工',
        laborTeam: '第二施工队',
        remark: '主体结构'
    },
    {
        id: 'P003',
        name: '地铁延长线工程',
        repository: '仓库C',
        projectUrl: 'https://example.com/project3',
        createTime: '2023-05-10',
        projectManager: '刘经理',
        constructor: '钱工',
        laborTeam: '第三施工队',
        remark: '地下部分'
    }
];

const ProjectOverview = () => {
    const [projects] = useState(mockProjects);
    const [filteredProjects, setFilteredProjects] = useState(mockProjects);
    const [filters, setFilters] = useState({
        name: '',
        projectManager: '',
        constructor: '',
        laborTeam: '',
        startDate: null,
        endDate: null
    });

    // 处理筛选变化
    const handleFilterChange = (key, value) => {
        const newFilters = { ...filters, [key]: value };
        setFilters(newFilters);
        applyFilters(newFilters);
    };

    // 应用筛选条件
    const applyFilters = (filterParams) => {
        let result = [...projects];

        if (filterParams.name) {
            result = result.filter(p => p.name.includes(filterParams.name));
        }

        if (filterParams.projectManager) {
            result = result.filter(p => p.projectManager.includes(filterParams.projectManager));
        }

        if (filterParams.constructor) {
            result = result.filter(p => p.constructor.includes(filterParams.constructor));
        }

        if (filterParams.laborTeam) {
            result = result.filter(p => p.laborTeam.includes(filterParams.laborTeam));
        }

        if (filterParams.startDate && filterParams.endDate) {
            result = result.filter(p => {
                const createTime = moment(p.createTime);
                return createTime.isAfter(filterParams.startDate) && createTime.isBefore(filterParams.endDate);
            });
        }

        setFilteredProjects(result);
    };

    // 导出Excel
    const exportToExcel = () => {
        const worksheet = XLSX.utils.json_to_sheet(filteredProjects);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "项目列表");
        XLSX.writeFile(workbook, `项目列表_${moment().format('YYYYMMDD_HHmmss')}.xlsx`);
    };

    // 图表配置 - 项目状态分布
    const projectStatusOption = {
        title: {
            text: '项目状态分布',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['进行中', '已完成', '未开始']
        },
        series: [
            {
                name: '项目状态',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    { value: 12, name: '进行中' },
                    { value: 8, name: '已完成' },
                    { value: 4, name: '未开始' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 图表配置 - 月度项目数量
    const monthlyProjectOption = {
        title: {
            text: '月度新增项目',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '项目数量',
                type: 'bar',
                data: [3, 5, 7, 4, 6, 8, 5],
                itemStyle: {
                    color: '#1890ff'
                }
            }
        ]
    };

    // 表格列配置
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '项目名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '仓库',
            dataIndex: 'repository',
            key: 'repository',
        },
        {
            title: '项目地址',
            dataIndex: 'projectUrl',
            key: 'projectUrl',
            render: url => <a href={url} target="_blank" rel="noreferrer">查看</a>,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '项目经理',
            dataIndex: 'projectManager',
            key: 'projectManager',
        },
        {
            title: '施工员',
            dataIndex: 'constructor',
            key: 'constructor',
        },
        {
            title: '劳务队',
            dataIndex: 'laborTeam',
            key: 'laborTeam',
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
        },
    ];

    return (
        <OverviewLayout
            children={{
            topRight:
                <ReactECharts
                    option={projectStatusOption}
                    style={{ height: '100%', width: '100%' }}
                />,
            topLeft:
                <ReactECharts
                    option={monthlyProjectOption}
                    style={{ height: '100%', width: '100%' }}
                />,
            bottom:
                <Card
                    title="项目列表"
                    variant={"borderless"}
                    extra={
                        <Button
                            type="primary"
                            icon={<DownloadOutlined />}
                            onClick={exportToExcel}
                        >
                            导出Excel
                        </Button>
                    }
                    >
                        <Space style={{ marginBottom: 16 }}>
                            <Input
                                placeholder="项目名称"
                                value={filters.name}
                                onChange={e => handleFilterChange('name', e.target.value)}
                                style={{ width: 150 }}
                            />
                            <Input
                                placeholder="项目经理"
                                value={filters.projectManager}
                                onChange={e => handleFilterChange('projectManager', e.target.value)}
                                style={{ width: 150 }}
                            />
                            <Input
                                placeholder="施工员"
                                value={filters.constructor}
                                onChange={e => handleFilterChange('constructor', e.target.value)}
                                style={{ width: 150 }}
                            />
                            <Input
                                placeholder="劳务队"
                                value={filters.laborTeam}
                                onChange={e => handleFilterChange('laborTeam', e.target.value)}
                                style={{ width: 150 }}
                            />
                            <DatePicker.RangePicker
                                value={[filters.startDate, filters.endDate]}
                                onChange={(dates) => {
                                    handleFilterChange('startDate', dates ? dates[0] : null);
                                    handleFilterChange('endDate', dates ? dates[1] : null);
                                }}
                            />
                            <Button
                                type="default"
                                onClick={() => {
                                    setFilters({
                                        name: '',
                                        projectManager: '',
                                        constructor: '',
                                        laborTeam: '',
                                        startDate: null,
                                        endDate: null
                                    });
                                    setFilteredProjects(projects);
                                }}
                            >
                                重置
                            </Button>
                        </Space>
                        <Table
                            columns={columns}
                            dataSource={filteredProjects}
                            rowKey="id"
                            pagination={{ pageSize: 10 }}
                            scroll={{ x: 1500 }}
                        />
                </Card>
        }}
        />
    );
};

export default ProjectOverview;